<template>
  <div class="order">
    <van-row v-for="(item, index) in cartList" :key="index">
      <van-col span="2">
        <input type="checkbox" v-model="item.status" @change="ck" class="input">
      </van-col>
      <van-col span="18">
        <van-card :price="item.price" :title="item.title" :thumb="item.pic"></van-card>
      </van-col>
      <van-col span="4">
        <van-stepper v-model="item.num" @change="changeNum(item.num)" />
      </van-col>
    </van-row>
    <div>
      <van-submit-bar :price="3050" button-text="提交订单">
        <input type="checkbox" v-model="ckAll" @change="all(ckAll)">
      </van-submit-bar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cartList: [],
      ckAll: false
    };
  },
  methods: {
    ck() {
      this.ckAll = this.cartList.every(item => item.status == true);
    },
    changeNum(val) {
      this.$store.commit('changeSte',val)
    },
    all(val) {
      console.log(val);
      this.$store.commit("ck", this.ckAll);
    }
  },
  created() {
    this.cartList = this.$store.state.cart;
    console.log(this.cartList);
  }
};
</script>
<style lang="scss" scoped>
.order {
  width: 100%;
  height: 100%;
}
.van-row {
  width: 96% !important;
  height: 110px !important;
  margin: auto;
  margin-top: 10px;
  background: #f5f5f5;
  .van-col {
    height: 100%;
    text-align: center;
    line-height: 110px;
  }
}
.van-card {
  background: #f5f5f5 !important;
}
.van-stepper {
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}
.input {
  width: 15px;
  height: 15px;
  margin: auto;
}
</style>
